!(function(){

  //底部悬浮条和消息列表插入body
  var suspend = $('<div class="suspend" style="bottom:30px;right:50px;position:fixed;background:#fff;"></div>');
  var list = $('<div class="list" style="display:none;position:fixed;width:318px;bottom:90px;right:50px;border:1px solid #d1d1d1;box-shadow:0 1px rgba(0, 0, 0, 0.3);background:#fff;"></div>')
  $('body').append(suspend, list);

  //底部悬浮条
  var bar = $('<div class="bar" style="float:left;height:50px;text-align:center;line-height:50px;border:1px solid #e44853;border-radius:6px 0 0 6px"></div>');

  //提醒图像
  var flash = $('<i class="flash" style="width:50px;height:48px;float:left;background:#e44853 url(/webim/img/icon.png) no-repeat -53px -54px;border-radius:5px 0 0 5px;"></i>');

  //最近联系人文本
  var text = $('<i class="text" style="padding:13px 27px;font-style:normal;font-size:16px;font-family:Microsoft Yahei;color:#dd424d">最近联系人</i>');
  (bar).append(flash, text);

  //收缩按钮
  var shrink = ('<div class="shrink" style="float:right;width:8px;height:50px;background:#e44853 url(/webim/img/icon.png) no-repeat -120px -41px;border-radius:0 5px 5px 0 "></div>');
  (suspend).append(bar, shrink);

  //消息列表上、中、下
  var listtop = $('<div class="list-top" style="height:32px;color:#fff;font-size:16px;font-family:Microsoft Yahei;background:#dd424d">' +
    '<i style="width:40px;height:32px;float:left;background:url(/webim/img/icon.png) no-repeat -228px 9px"></i>' +
    '<i style="font-style:normal;line-height:32px">消息</i>' +
    '<i class="closebtn" style="width:32px;height:32px;float:right;background:url(/webim/img/icon.png) no-repeat 12px -49px"></i></div>');
  var listitems = $('<div class="scroll" style="width:320px;max-height:240px;overflow-y:auto"></div>');
  var ignore = $('<div style="height:39px;line-height:39px;border-top:#ddd 1px solid;text-indent:250px;color:#108ccc;font-size:14px;font-family:Microsoft Yahei;">' +
    '<i class="ignore" style="font-style:normal">忽略全部</i></div>');
  (list).append(listtop, listitems, ignore);

  //每条消息
  var listitem = $('<div class="list-item" style="height:60px;padding:12px;font-size:14px;font-family:Microsoft Yahei">' +
    '<i class="avatar" style="width:36px;height:36px;margin-right:12px;float:left;background:#f8aa58 url(/webim/img/icon.png) no-repeat -63px -5px;border-radius:5px;"></i>' +
    '<span style="color:#333;">开思</span></br><span style="color:#666;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 200px;display: block;">请问什么时候发货?</span>' +
    '<i class="count" style="width:24px;height:14px;float:right;color:#fff;font-size:12px;font-family:Arial;background:#e44853;margin-top:-26px;text-align:center;font-style:normal;border-radius:5px;line-height:14px">3</i></div>');

  //测试
  var listitem1 = $('<div class="list-item" style="height:60px;padding:12px;font-size:14px;font-family:Microsoft Yahei">' +
    '<i class="avatar" style="width:36px;height:36px;margin-right:12px;float:left;background:#f8aa58 url(/webim/img/icon.png) no-repeat -63px -5px;border-radius:5px;"></i>' +
    '<span class="nickName" style="color:#333;">开思</span></br><span class="content" style="color:#666;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 200px;display: block;">请问什么时候发货?</span>' +
    '<i class="count" style="width:24px;height:14px;float:right;color:#fff;font-size:12px;font-family:Arial;background:#e44853;margin-top:-26px;text-align:center;font-style:normal;border-radius:5px;line-height:14px">3</i></div>');
  // var listitem2 = $('<div class="list-item" style="height:60px;padding:12px;font-size:14px;font-family:Microsoft Yahei">' +
  //   '<i class="avatar" style="width:36px;height:36px;margin-right:12px;float:left;background:#f8aa58 url(/webim/img/icon.png) no-repeat -235px -54px;border-radius:5px;"></i>' +
  //   '<span style="color:#333;">开思</span></br><span style="color:#666;">请问什么时候发货?</span>' +
  //   '<i class="count" style="width:24px;height:14px;float:right;color:#fff;font-size:12px;font-family:Arial;background:#e44853;margin-top:-5px;text-align:center;font-style:normal;border-radius:5px;line-height:14px">3</i></div>');
  // var listitem3 = $('<div class="list-item" style="height:60px;padding:12px;font-size:14px;font-family:Microsoft Yahei">' +
  //   '<i class="avatar" style="width:36px;height:36px;margin-right:12px;float:left;background:#f8aa58 url(/webim/img/icon.png) no-repeat -235px -54px;border-radius:5px;"></i>' +
  //   '<span style="color:#333;">开思</span></br><span style="color:#666;">请问什么时候发货?</span>' +
  //   '<i class="count" style="width:24px;height:14px;float:right;color:#fff;font-size:12px;font-family:Arial;background:#e44853;margin-top:-5px;text-align:center;font-style:normal;border-radius:5px;line-height:14px">3</i></div>');
  // var listitem4 = $('<div class="list-item" style="height:60px;padding:12px;font-size:14px;font-family:Microsoft Yahei">' +
  //   '<i class="avatar" style="width:36px;height:36px;margin-right:12px;float:left;background:#f8aa58 url(/webim/img/icon.png) no-repeat -235px -54px;border-radius:5px;"></i>' +
  //   '<span style="color:#333;">开思</span></br><span style="color:#666;">请问什么时候发货?</span>' +
  //   '<i class="count" style="width:24px;height:14px;float:right;color:#fff;font-size:12px;font-family:Arial;background:#e44853;margin-top:-5px;text-align:center;font-style:normal;border-radius:5px;line-height:14px">3</i></div>');
  (listitems).append(listitem, listitem1);


  //getUnreadUser();

  //设置消息提醒是否闪动

  function getUnreadUser() {
    var timestamp = new Date().getTime();
    var signature = md5([username, authToken, timestamp].join('').split('').sort().join(''));
    var query = ['uid=', username, '&timestamp=', timestamp, '&signature=', signature].join('');

    $.ajax({
      type: 'GET',
      url: '' + query,
      cache: false,
      success: updateList,
      error: function (err) {
        console.log('请求失败', err);
      }
    });
  }

  function updateList(users) {
    console.log('成功返回未读消息联系人：', users);
    var counts = users.length;
    if (counts == 0) {
      stopFlash();
    }
    if (count && !timer) {
      startFlash();
    }
  }

//设置点击收缩按钮动画
  var $bar =$('.bar');
  var $shrink = $('.shrink');
  console.log($shrink.css("background-position-x"));
  $shrink.click(function(){
    if($shrink.css("background-position-x") == "-120px"){
      $bar.animate({width:"50px"},"slow");
      $('.text').hide();
      $shrink.css({"background-position-x": "-180px"});
    } else {
      $bar.animate({width:"186px"},"slow");
      $('.text').show();
      $shrink.css({"background-position-x": "-120px"});
    }
  });


  //点击bar消息列表出现和隐藏,假如只有一个人时直接到聊天页面  链接需处理
  var $list = $('.list');
  $bar.click(function(){
    if($list.css("display")=="block") {
      $list.hide();
    } else if($('.list-item').length == 1) {
      window.open('http://ec-test.casstime.com/webim/pages/chat?chatTo=SUPER007&type=store');
    } else if($('.list-item').length > 1) {
      $list.show();
    }
  });

  var timer;

  function startFlash() {
    timer = setInterval(function () {
      if (count % 2 == 0) {
        $('.flash').css({"background-position-x": "-53px", "background-position-y": "-54px"});
      } else {
        $('.flash').css({"background-position-x": "-500px", "background-position-y": "-500px"});
      }
      count++;
    }, 300);
  }

  function stopFlash() {
    if (timer) {
      $('.flash').css({"background-position-x": "-53px","background-position-y": "-54px"});
      clearInterval(timer);
      timer = null;
    }
  }

  $('.closebtn').click(function()  {
    $list.hide();
  });

  //点击忽略全部，消息列表隐藏及停止闪动
  $('.ignore').click(function()  {
    $list.hide();
    stopFlash();
  });

  //有未读消息
  // $('.count').text(count);

  //点击消息时此条消息列表消失（是隐藏还是刷新），打开聊天页面，
  $('.scroll .list-item').click(function() {
    $(this).hide();
    window.open('http://ec-test.casstime.com/webim/pages/chat?chatTo=SUPER007&type=store');
  });

})();

